import {
    useParams,
    useNavigate,
    Link
} from 'react-router-dom';
import {
    useEffect
} from 'react'
import { useRepos } from '@/hooks/useRepos';

const RepoList = () => {
    const { id } = useParams();
    const navigate = useNavigate();
    // hooks
    const { repos, loading, error } = useRepos(id);
    useEffect(() => {
        if (!id.trim()) {
            navigate('/');
        }
    }, [])

    if (loading) {
        return <>Loading</>
    }
    if (error) {
        return <>Error: {error}</>
    }

    return (
        <div>
            <h2>Repo for {id}</h2>
            {
                repos.map(repo => (
                    <div>
                        <Link key={repo.id} to={`/users/${id}/repos/${repo.id}`}>
                            {repo.name}
                        </Link>
                    </div>
                ))
            }
        </div>
    )
}

export default RepoList